<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/js/pager/pager.css">
</head>

<body>
    <ul id="test">
        <script type="text/html" id="demo">
            {{each $data item i}}
            <li>{{item}}</li>
            {{/each}}
        </script>
    </ul>
    <div id="container" style="border:1px solid red"> </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="/js/art-template.js"></script>
    <script src="/js/pager/pager.js"></script>
    <script>
        $(function () {

            var arr = []
            for (let i = 1; i <= 49; i++) {
                arr.push("a" + i)
            }
            var pageSize = 10
            var pageCount = Math.ceil(arr.length / pageSize)

            function loadlist(pageIndex) {
                var start = (pageIndex - 1) * pageSize
                var end = start + pageSize
                $("#test").html(template("demo", arr.slice(start, end)))
            }

            pager("#container", pageCount, function (pageIndex) {
                loadlist(pageIndex)
            })
        })
    </script>
</body>

</html>